// 1. 等待页面加载，，，不会等待图片
// 2. 防止全局变量的污染
// 监控
$(function () {
  $('.monitor .tabs > a').on('click', function () {
    $(this).addClass('active').siblings().removeClass('active')
    const index = $(this).index()
    // console.log(index)
    $('.monitor .content').eq(index).show().siblings('.content').hide()
  })

  // 需求：给项目中所有的 marquee 添加10个
  // $('.monitor .marquee').each(function () {
  //   // clone(true) 深克隆 克隆元素上的事件
  //   $(this).append($(this).children().clone())
  // })
  // const child = $('.monitor .marquee').eq(0).children().clone()
  // $('.monitor .marquee').eq(0).append(child)
  // const child1 = $('.monitor .marquee').eq(1).children().clone()
  // $('.monitor .marquee').eq(1).append(child1)

  $('.monitor .marquee').each(function () {
    const child = $(this).children().clone()
    $(this).append(child)
  })
})

// 点位
$(function () {
  const myChart = echarts.init($('.pie')[0])
  const option = {
    series: [
      {
        // 名字
        name: '点位统计',
        // 饼状图
        type: 'pie',
        data: [
          { value: 20, name: '云南' },
          { value: 26, name: '北京' },
          { value: 24, name: '山东' },
          { value: 25, name: '河北' },
          { value: 20, name: '江苏' },
          { value: 25, name: '浙江' },
          { value: 30, name: '四川' },
          { value: 42, name: '湖北' },
        ],
        // 显示为南丁格尔玫瑰图
        roseType: 'radius',
        radius: ['10%', '70%'],
        color: [
          '#006cff',
          '#60cda0',
          '#ed8884',
          '#ff9f7f',
          '#0096ff',
          '#9fe6b8',
          '#32c5e9',
          '#1d9dff',
        ],
        // 设置文本
        label: {
          fontSize: 14,
        },
        labelLine: {
          length: 6,
          length2: 8,
        },
      },
    ],
    tooltip: {
      formatter: '{a}<br/>{b}:{c}({d}%)',
    },
  }
  myChart.setOption(option)

  // window有个resize事件  scroll事件  load事件: 窗口加载完成，结构和资源都加载完成
  $(window).on('resize', function () {
    // echarts提供的，重新调整图表的大小
    myChart.resize()
  })
})

$(function () {
  // 1. 初始化
  const myChart = echarts.init(document.querySelector('.bar'))
  const option = {
    xAxis: {
      type: 'category',
      data: [
        '上海',
        '广州',
        '北京',
        '深圳',
        '合肥',
        '江西',
        '湖南',
        '福建',
        '杭州',
        '厦门',
        '济南',
        '成都',
        '重庆',
      ],
      // 坐标文字
      axisLabel: {
        color: '#4c9bfd',
      },
      // 坐标线
      axisLine: {
        // lineStyle: {
        //   color: 'rgba(0, 240, 255, 0.3)',
        // },
        show: false,
      },
      // 坐标刻度
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: 'value',
      // 坐标文字
      axisLabel: {
        color: '#4c9bfd',
      },
      // 坐标线
      axisLine: {
        show: false,
        // lineStyle: {
        //   color: 'rgba(0, 240, 255, 0.3)',
        // },
      },
      // 坐标刻度
      axisTick: {
        show: false,
      },
      // 分割线
      splitLine: {
        lineStyle: {
          color: 'rgba(0, 240, 255, 0.3)',
        },
      },
    },
    grid: {
      top: '3%',
      right: '3%',
      bottom: '3%',
      left: '0%',
      containLabel: true,
      show: true,
      borderColor: 'rgba(0, 240, 255, 0.3)',
    },
    series: [
      {
        name: '用户统计',
        data: [
          2100,
          1900,
          1700,
          1560,
          1400,
          {
            value: 1200,
            itemStyle: {
              color: '#254065',
            },
            // 相当于hover
            emphasis: {
              itemStyle: {
                color: '#254065',
              },
            },
            tooltip: {
              extraCssText: 'opacity: 0',
            },
          },
          {
            value: 1200,
            itemStyle: {
              color: '#254065',
            },
            // 相当于hover
            emphasis: {
              itemStyle: {
                color: '#254065',
              },
            },
            tooltip: {
              extraCssText: 'opacity: 0',
            },
          },
          1200,
          900,
          750,
          600,
          480,
          240,
        ],
        type: 'bar',
      },
    ],
    // 参数1和参数2 是 一个坐标点
    // 参数3和参数4 是 一个坐标点
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#00fffb' },
      { offset: 1, color: '#0061ce' },
    ]),
    tooltip: {
      // 触发方式
      trigger: 'item',
    },
  }
  myChart.setOption(option)
})

// 订单
$(function () {
  const data = {
    day365: { orders: '20,301,999', amount: '99834' },
    day90: { orders: '301,987', amount: '9834' },
    day30: { orders: '1,987', amount: '3834' },
    day1: { orders: '987', amount: '834' },
  }

  $('.order .filter a').on('click', function () {
    $(this).addClass('active').siblings().removeClass('active')
    let key = this.dataset.key
    let obj = data[key]
    console.log(key);
    $('.order .item h4').eq(0).text(obj.orders)
    $('.order .item h4').eq(1).text(obj.amount)
  })
  // 默认一进来，直接触发第一个按钮的点击事件
  $('.order .filter a').eq(0).click()
})

$(function () {
  // 1. 初始化
  const data = {
    year: [
      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
    ],
    quarter: [
      [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
      [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34],
    ],
    month: [
      [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
      [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98],
    ],
    week: [
      [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
      [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24],
    ],
  }
  const myChart = echarts.init(document.querySelector('.line'))
  const option = {
    xAxis: {
      type: 'category',
      data: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月',
      ],
      // 不显示刻度
      axisTick: {
        show: false,
      },
      // 不显示坐标线
      axisLine: {
        show: false,
      },
      axisLabel: {
        color: '#4c9bfd',
      },
      // 不留两端空隙
      boundaryGap: false,
    },
    yAxis: {
      type: 'value',
      // 不显示刻度
      axisTick: {
        show: false,
      },
      // 不显示坐标线
      axisLine: {
        show: false,
      },
      axisLabel: {
        color: '#4c9bfd',
      },
      splitLine: {
        lineStyle: {
          color: '#012f4a',
        },
      },
    },
    series: [
      {
        name: '预期销售额',
        data: data.year[0],
        type: 'line',
        // 曲线
        smooth: true,
      },
      {
        name: '实际销售额',
        data: data.year[1],
        type: 'line',
        smooth: true,
      },
    ],
    grid: {
      top: '20%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
      show: true,
      borderColor: '#012f4a',
    },
    legend: {
      textStyle: {
        color: '#4c9bfd',
      },
      right: '10%',
    },
    color: ['#00f2f1', '#ed3f35'],
    tooltip: {
      trigger: 'axis',
    },
  }
  let index = 0
  let timer
  myChart.setOption(option)

  // 给按钮注册点击事件
  $('.sales .caption a').on('click', function () {
    $(this).addClass('active').siblings().removeClass('active')
    const key = $(this).data('key')
    index = $(this).index() - 1
    // console.log(index)
    // 修改option的data
    option.series[0].data = data[key][0]
    option.series[1].data = data[key][1]
    myChart.setOption(option)
  })

  // 开启定时器

  timer = setInterval(function () {
    index++
    // console.log(index)
    if (index > 3) {
      index = 0
    }
    $('.sales .caption a').eq(index).click()
  }, 1000)

  // 清除定时器
  $('.sales').on('mouseenter', function () {
    clearInterval(timer)
  })
  $('.sales').on('mouseleave', function () {
    timer = setInterval(function () {
      index++
      // console.log(index)
      if (index > 3) {
        index = 0
      }
      $('.sales .caption a').eq(index).click()
    }, 1000)
  })
})

// 雷达图
$(function () {
  const myChart = echarts.init(document.querySelector('.radar'))

  var lineStyle = {
    normal: {
      width: 1,
      opacity: 0.5,
    },
  }

  const option = {
    radar: {
      radius: '65%',
      indicator: [
        { name: '机场', max: 100 },
        { name: '商场', max: 100 },
        { name: '火车站', max: 100 },
        { name: '汽车站', max: 100 },
        { name: '地铁', max: 100 },
      ],
      shape: 'circle',
      splitNumber: 4,
      name: {
        textStyle: {
          color: '#4c9bfd',
        },
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.7)',
        },
      },
      splitArea: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.7)',
        },
      },
    },
    series: [
      {
        name: '北京',
        type: 'radar',
        lineStyle: lineStyle,
        data: [[90, 19, 56, 11, 34]],
        // 设置拐点的图形
        symbol: 'circle',
        // 设置拐点的大小
        symbolSize: 6,
        // 设置拐点的样式
        itemStyle: {
          color: '#fff',
        },
        // 是否显示拐点的文字
        label: {
          show: true,
        },
        areaStyle: {
          color: 'rgba(238, 197, 102, 0.6)',
        },
      },
    ],
    tooltip: {
      position: ['60%', '20%'],
    },
  }
  myChart.setOption(option)
})

$(function () {
  const myChart = echarts.init(document.querySelector('.gauge'))

  const option = {
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: ['130%', '150%'],
        center: ['50%', '80%'],
        // 不显示label
        label: {
          show: false,
        },
        // 不显示线
        labelLine: {
          show: false,
        },
        // 修改起始角度
        startAngle: 180,
        data: [
          {
            value: 100,
            name: '搜索引擎',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: '#00c9e0' }, // 0 起始颜色
                  { offset: 1, color: '#005fc1' }, // 1 结束颜色
                ]
              ),
            },
          },
          {
            value: 100,
            name: '直接访问',
            itemStyle: {
              color: '#12274d',
            },
          },
          {
            value: 200,
            name: '邮件营销',
            itemStyle: {
              color: 'transparent',
            },
          },
        ],
        hoverOffset: 0,
      },
    ],
  }
  myChart.setOption(option)
})

$(function () {
  /* 
    1. 根据数据动态生成省份的信息
    2. 给省份信息注册事件，并且 触发时需要生成 品牌的信息
    3. 自动播放的效果
    4. 清除定时器效果
  */

  const hotData = [
    {
      city: '北京', // 城市
      sales: '25, 179', // 销售额
      flag: true, //  上升还是下降
      brands: [
        //  品牌种类数据
        { name: '可爱多', num: '9,016', flag: true },
        { name: '娃哈哈', num: '8,341', flag: true },
        { name: '喜之郎', num: '7,407', flag: false },
        { name: '八喜', num: '6,080', flag: false },
        { name: '小洋人', num: '6,724', flag: false },
        { name: '好多鱼', num: '2,170', flag: true },
      ],
    },
    {
      city: '河北',
      sales: '23,252',
      flag: false,
      brands: [
        { name: '可爱多', num: '3,457', flag: false },
        { name: '娃哈哈', num: '2,124', flag: true },
        { name: '喜之郎', num: '8,907', flag: false },
        { name: '八喜', num: '6,080', flag: true },
        { name: '小洋人', num: '1,724', flag: false },
        { name: '好多鱼', num: '1,170', flag: false },
      ],
    },
    {
      city: '上海',
      sales: '20,760',
      flag: true,
      brands: [
        { name: '可爱多', num: '2,345', flag: true },
        { name: '娃哈哈', num: '7,109', flag: true },
        { name: '喜之郎', num: '3,701', flag: false },
        { name: '八喜', num: '6,080', flag: false },
        { name: '小洋人', num: '2,724', flag: false },
        { name: '好多鱼', num: '2,998', flag: true },
      ],
    },
    {
      city: '江苏',
      sales: '23,252',
      flag: false,
      brands: [
        { name: '可爱多', num: '2,156', flag: false },
        { name: '娃哈哈', num: '2,456', flag: true },
        { name: '喜之郎', num: '9,737', flag: true },
        { name: '八喜', num: '2,080', flag: true },
        { name: '小洋人', num: '8,724', flag: true },
        { name: '好多鱼', num: '1,770', flag: false },
      ],
    },
    {
      city: '山东',
      sales: '20,760',
      flag: true,
      brands: [
        { name: '可爱多', num: '9,567', flag: true },
        { name: '娃哈哈', num: '2,345', flag: false },
        { name: '喜之郎', num: '9,037', flag: false },
        { name: '八喜', num: '1,080', flag: true },
        { name: '小洋人', num: '4,724', flag: false },
        { name: '好多鱼', num: '9,999', flag: true },
      ],
    },
  ]

  // 动态渲染省份信息
  let html = ''
  let index = 0
  hotData.forEach((item) => {
    html += `<li>
        <span>${item.city}</span>
        <span>${item.sales} <s class="${
      item.flag ? 'icon-up' : 'icon-down'
    }"></s></span>
      </li>`
  })
  $('.sup').html(html)

  // $obj: 需要渲染谁的信息
  function render($obj) {
    $obj.addClass('active').siblings().removeClass('active')
    // 获取到当前li下的数据， 动态生成多个li， 添加到sub
    const idx = $obj.index()
    index = idx
    const brands = hotData[idx].brands
    let html = ''
    brands.forEach((item) => {
      html += `<li><span>${item.name}</span><span>${item.num} <s class="${
        item.flag ? 'icon-up' : 'icon-down'
      }"></s></span></li>`
    })
    $('.sub').html(html)
  }

  // 给省份注册事件
  $('.sup').on('mouseenter', 'li', function () {
    render($(this))
  })

  // $('.sup li').eq(0).mouseenter()
  render($('.sup li').eq(0))

  // 自动播放功能
  let timer = setInterval(function () {
    index++
    if (index > 4) {
      index = 0
    }
    render($('.sup li').eq(index))
  }, 1000)

  // 清除定时器
  $('.top').on('mouseenter', function () {
    console.log('执行')
    clearInterval(timer)
  })

  $('.top').on('mouseleave', function () {
    timer = setInterval(function () {
      index++
      if (index > 4) {
        index = 0
      }
      render($('.sup li').eq(index))
    }, 1000)
  })
})
